<template>
  <div class="nav-container">
    <div class="title" @click="goToHome">
      <h1>星</h1>
      <h2>空</h2>
      <h3>下</h3>
      <h4>の</h4>
      <h6>尘</h6>
      <h6>埃</h6>
    </div>

    <!-- 搜索框 -->
    <div class="search" @mouseleave="searchBlur" @mouseenter="searchFocus">
      <input type="text" placeholder="请输入搜索内容 ^_^" v-model="keyword" @keyup="getSearchSuggest" @keyup.enter="goToSearch"
        @focus="searchFocus" @blur="searchBlur">
      <span class="iconfont icon-sousuo" @click="goToSearch"></span>
      <div class="prompt" v-show="flag">
        <div class="suggest" v-for="(item, index) in suggestList.order" :key="index">
          <div class="suggest-title">
            <i v-show="item == 'songs'" class="iconfont icon-sifenyinfuyinle"></i>
            <i v-show="item == 'artists'" class="iconfont icon-geshou"></i>
            <i v-show="item == 'albums'" class="iconfont icon-zhuanji"></i>
            <i v-show="item == 'playlists'" class="iconfont icon-gedan"></i>
            <h4 v-if="item == 'songs'">单曲</h4>
            <h4 v-if="item == 'artists'">歌手</h4>
            <h4 v-if="item == 'albums'">专辑</h4>
            <h4 v-if="item == 'playlists'">歌单</h4>
          </div>
          <ul>
            <li v-for="list in suggestList[item]" :key="list.id" @click="searchItem(item, list)" v-html="list.sugName">
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 头像 -->
    <div class="avatar">
      <img v-if="userInfo.nickname" class="small-avatar" :src="userInfo.avatarUrl">
      <div v-if="!userInfo.nickname" class="login-box" @click="$router.push('/home/login')">登录</div>
      <div class="userinfo" v-if="userInfo.nickname">
        <img class="big-avatar" :src="userInfo.avatarUrl" @click="$router.push('/userprofiles/' + userInfo.userId)">
        <h2 class="user-name">{{ userInfo.nickname }}</h2>
        <div class="user-detail" v-if="userDetail.profile">
          <div class="count-info">
            <h3 class="number">{{ userDetail.profile.eventCount }}</h3>
            <span>动态</span>
          </div>
          <div class="count-info">
            <h3 class="number">{{ userDetail.profile.follows }}</h3>
            <span>关注</span>
          </div>
          <div class="count-info">
            <h3 class="number">{{ userDetail.profile.followeds }}</h3>
            <span>粉丝</span>
          </div>
        </div>
        <ul>
          <li v-if="vipInfo.musicPackage"><span><i class="el-icon el-icon-eleme"></i>我的会员</span> <span class="time">{{
          vipInfo.musicPackage.expireTime
          | formatTime
          
          }}到期<i class="el-icon-arrow-right"></i></span> </li>
          <li class="level"><span><i class="el-icon el-icon-medal"></i>等级</span> <span class="level-count">Lv{{
          userDetail.level
          }}<i class="el-icon-arrow-right"></i></span> </li>
          <li><span><i class="el-icon el-icon-user"></i>个人信息设置</span> <span><i class="el-icon-arrow-right"></i></span>
          </li>
          <li class="binds"><span><i class="el-icon  el-icon-connection"></i>绑定社交账号</span> <span><i
                class="el-icon-arrow-right"></i></span> </li>
          <li @click="userLogout"><span><i class="el-icon el-icon-switch-button"></i>退出登录</span> <span><i
                class="el-icon-arrow-right"></i></span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 登录，注册 -->
    <div class="login">
    </div>

    <!-- 文本导航 -->
    <div class="txtnav">
      <ul>
        <!-- <li><a href="javascript:;">仰望</a></li>
        <li><a href="javascript:;">星穹</a></li>
        <li><a href="javascript:;">注视</a></li>
        <li><a href="javascript:;">夜空</a></li> -->
      </ul>
    </div>

    <!-- 音乐按钮 -->
    <div class="music">
      <span class="iconfont icon-sifenyinfuyinle" v-show="!musicCtr" id="musicspan1" @click="musicShow"></span>
      <span class="iconfont icon-sifenyinfuyinle" v-show="musicCtr" id="musicspan2" @click="musicShow"></span>
      <UserBar :show="!musicCtr" ref="userbar"></UserBar>
    </div>
  </div>
</template>

<script>
import '@/incofont/search/iconfont.css'
import '@/incofont/fontBili/iconfont.css'
import axios from '@/request/request'
import { mapState } from "vuex";
import UserBar from './UserBar/UserBar.vue';
export default {
  name: "Nav",
  data() {
    return {
      // 控制搜索建议框显示与隐藏
      flag: false,
      flag1: null,
      musicCtr: true,
      // 搜索关键词
      keyword: "",
      timer: null,
      // albums: 专辑   artists：歌手  playlists：歌单   songs：单曲
      suggestList: {},
      userDetail: {},
      vipInfo: {}
    };
  },
  computed: {
    ...mapState("user", ["userInfo"])
  },
  mounted() {
    this.getUserDetail();
    this.getVIPInfo();
  },
  watch: {
    $route() {
      this.flag = false;
      this.keyword = "";
    },
    userInfo: {
      handler() {
        if (localStorage.getItem('token')) {
          console.log('用户信息发生改变，获取用户信息！');
          this.getUserDetail()
          this.getVIPInfo()
        }
      },
      immediate: true
    }
  },
  methods: {
    musicShow() {
      if (!localStorage.getItem('token')) return
      if (this.musicCtr) {
        this.musicCtr = false;
        this.$refs.userbar.getUserPlayList(false)
      }
      else {
        this.musicCtr = true;
      }
    },
    // 根据关键词获取搜索结果
    goToSearch() {
      if (this.keyword.trim()) {
        this.$router.push(`/search/${this.keyword}`);
        this.$emit("closeTxtView");
        this.keyword = "";
      }
    },
    // 获取搜索建议   搜索结果同时包含单曲 , 歌手 , 歌单 ,mv 信息
    getSearchSuggest() {
      clearTimeout(this.timer);
      this.timer = null;
      if (this.keyword.trim()) {
        this.timer = setTimeout(async () => {
          const { data: res } = await axios.get(`/search/suggest?keywords=${this.keyword}`);
          if (res.code == 200 && res.result.order) {
            this.suggestList = this.$light(this.keyword, res.result);
            this.flag = true;
          }
        }, 500);
      }
      else {
        this.flag = false;
      }
    },
    // 搜索框获得焦点事件
    searchFocus() {
      if (this.suggestList.order && this.keyword.trim()) {
        this.flag = true;
      }
    },
    // 搜索建议点击事件
    searchItem(item, list) {
      if (item == "songs") {
        this.keyword = list.name;
        this.goToSearch();
        this.flag = false;
      }
      else {
        this.$router.push(`/${item}/${list.id}`);
        this.flag = false;
      }
    },
    // 搜索框失去焦点事件
    searchBlur() {
      setTimeout(() => {
        this.flag = false;
      }, 300);
    },
    // 退出登录
    async userLogout() {
      const { data: res } = await axios.post("/logout");
      if (res.code == 200) {
        this.$message.success("退出登录成功！");
        this.$router.replace('/home')
        localStorage.removeItem("userInfo");
        localStorage.removeItem("token");
        this.$store.commit("user/updateUserInfo", {});
      }
    },
    // 回到首页
    goToHome() {
      this.$router.push("/home");
      window.scrollTo(0, 0);
    },
    // 获取用户详情
    async getUserDetail() {
      const { data: res } = await axios.get(`/user/detail?uid=${this.userInfo.userId}`);
      if (res.code == 200) {
        this.userDetail = res;
      }
    },
    async getVIPInfo() {
      const { data: res } = await axios.get(`/vip/info`);
      if (res.code == 200) {
        this.vipInfo = res.data;
      }
    }
  },
  components: { UserBar }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-decoration: none;
}

@media (max-width: 768px) {
  .search {
    width: 10vw;
  }
}

@media (max-width: 1200px) {
  .txtnav {
    display: none;
  }
}

.nav-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 7.5%;
  z-index: 1000;
  backdrop-filter: blur(50px);
  // background-image: linear-gradient(100deg, rgb(42, 23, 62), rgb(72, 68, 68));
  // background-image: url('@/assets/images/星空下的尘埃.png');
  // background-size: 100%;
  // background-position: 0 -300px;

  // 登录注册按钮
  .login {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 0;
    right: 10vw;
    width: 7vw;
    height: 70px;

    // background-color: pink;
    a {
      color: #dd801c;
      font-size: 18px;
    }
  }

  // 音乐按钮
  .music {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 7vw;

    #musicspan1 {
      font-size: 2.5vw;
      color: #8a3cd7;
      font-weight: 700;
    }

    #musicspan2 {
      font-size: 2.4vw;
      color: #a6a6a6;
      transition: all 0.5;

      // &:hover {
      //   font-size: 40px;
      //   color: #8a3cd7;
      //   font-weight: 700;
      // }
    }
  }

  // 文本导航
  .txtnav {
    position: absolute;
    top: 0;
    left: 13vw;
    width: 25vw;
    height: 70px;

    ul {
      display: flex;
      width: 100%;
      height: 100%;

      li {
        width: 20%;
        height: 100%;

        a {
          display: block;
          width: 100%;
          height: 100%;
          font-size: 20px;
          text-align: center;
          line-height: 70px;
          color: #8a3cd7;
          font-weight: 700;

          &:hover {
            border-bottom: 5px solid #8a3cd7;
          }
        }
      }
    }
  }

  // 头像区域
  .avatar {
    position: absolute;
    top: 50%;
    right: 20vw;
    transform: translateY(-50%) scale(100%);
    width: 3vw;
    height: 3vw;
    border-radius: 50%;

    &:hover .small-avatar {
      display: none;
    }

    &:hover .userinfo {
      display: block;
    }

    .small-avatar {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      z-index: 1001;
      transition: all 2s linear;
    }

    .login-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      text-align: center;
      line-height: 3vw;
      z-index: 1002;
      background-color: #fff;
      cursor: pointer;
      font-size: 0.8vw;
    }

    .userinfo {
      display: none;
      // opacity: 0;
      position: absolute;
      top: 60px;
      left: 50%;
      z-index: 1000;
      transform: translateX(-50%);
      width: 270px;
      height: 350px;
      background-color: #fff;
      border-radius: 3px;
      padding: 40px 0 10px;
      transition: all 2s linear;
      cursor: default;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .user-name {
        font-size: 18px;
      }

      .big-avatar {
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }

      .user-detail {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 15px;

        .count-info {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          span {
            color: rgb(145, 145, 145);
            font-size: 14px;
          }
        }
      }

      ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 200px;
        margin-top: 15px;
        list-style: none;

        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 20%;
          padding: 0 20px;
          font-size: 14px;

          &:hover {
            background-color: rgb(240, 240, 240);
          }

          & span:nth-child(2) {
            i {
              color: rgb(168, 168, 168);
            }
          }

          .time {
            font-size: 12px;
            color: rgb(209, 209, 209);
          }

          .level-count {
            font-size: 14px;
            color: rgb(126, 126, 126);
          }

          .el-icon {
            font-size: 18px;
            margin-right: 3px;
            transform: translateY(1px);
          }
        }

        .level,
        .binds {
          border-bottom: 1px solid rgb(237, 237, 237);
        }
      }
    }
  }

  // 搜索框
  .search {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25vw;
    height: 70%;

    .prompt {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 360px;
      max-height: 600px;
      border-radius: 3px;
      z-index: 1000;
      padding: 10px 0;
      background-color: rgb(255, 255, 255);
      box-shadow: 0 -1px 2px 1px rgba(200, 200, 200, 0.8) inset;
      overflow: auto;

      .suggest {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 10px;
        cursor: default;

        // background-color: pink;
        .suggest-title {
          display: flex;
          align-items: center;
          color: rgb(183, 183, 183);
          padding: 0 10px;

          &:hover {
            color: rgb(151, 151, 151);
          }

          i {
            font-style: normal;
            font-size: 18px;
          }

          .icon-zhuanji {
            font-size: 16px;
          }

          h4 {
            font-weight: 400;
          }
        }

        ul {
          width: 100%;
          text-align: start;
          margin-top: 5px;

          li {
            width: 100%;
            height: 30px;
            padding: 0 28px;
            line-height: 30px;
            font-size: 14px;
            color: rgb(90, 90, 90);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            &:hover {
              background-color: rgb(235, 235, 235);
            }
          }
        }
      }
    }

    span {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      font-size: 1.7vw;
      color: #8a3cd7;
      font-weight: 700;
    }

    // background-color: pink;
    input {
      width: 100%;
      height: 100%;
      border-radius: 25px;
      border: none;
      outline: none;
      padding-right: 45px;
      padding-left: 30px;
      box-shadow: 0 -1px 2px 1px rgba(200, 200, 200, 0.8) inset;
      color: #8a3cd7;
      line-height: 50px;
      font-size: 16px;

      &::placeholder {
        color: rgb(180, 180, 180);
        font-size: 16px;
      }
    }
  }

  // logo区域
  .title {
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    transform: scale(90%);
    display: flex;
    align-items: center;
    cursor: pointer;

    h1 {
      font-size: 2.8vw;
      transform: rotate(8deg) rotateY(-20deg);
      color: #8a3cd7;
      background: linear-gradient(90deg, #4342af, #8a3cd7);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    h2 {
      font-size: 1.35vw;
      transform: translateY(5px);
      color: #8a3cd7;
      background: linear-gradient(90deg, #7551a9, #8a3cd7);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    h3 {
      font-size: 1vw;
      transform: translateY(8px);
      color: #ae3cd7;
      background: linear-gradient(90deg, #65abda, #ae3cd7; );
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    h4 {
      font-size: 0.8vw;
      transform: translateY(10px);
      color: rgb(135, 135, 135);
    }

    h6 {
      font-size: 1.1vw;
      transform: translateY(20px);
      color: #d28c35;
      background: linear-gradient(90deg, #ce5c42, #d28c35; );
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>